<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
            <div class="report_header_date">
              <el-date-picker style="width: 100%;" v-model="query.date" value-format="yyyy-MM-dd" type="daterange"
                align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>

            <div class="report_header_query">
              <el-input v-model="query.orderSn" placeholder="请输入订单号" clearable></el-input>
            </div>

            <div class="report_header_query">
              <el-input v-model="query.title" placeholder="请输入退款单号"></el-input>
            </div>
          </div>
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryPayment">查询</el-button>
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-tabs type="border-card" @tab-click="tabsClick" :style="{height:curHeight+'px'}">
        <el-tab-pane label="全部">
          <div class="details_card" v-loadMore="[payLoads,'refunds-list1']" :style="{height:tabsHeight+'px'}">
            <paymentList :payments="payments" @detailsClick="detailsClick"></paymentList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="等待退款">
          <div class="details_card" v-loadMore="[payLoads,'refunds-list2']" :style="{height:tabsHeight+'px'}">
            <paymentList :payments="payments" @detailsClick="detailsClick"></paymentList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="确认退款">
          <div class="details_card" v-loadMore="[payLoads,'refunds-list3']" :style="{height:tabsHeight+'px'}">
            <paymentList :payments="payments" @detailsClick="detailsClick"></paymentList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="退款完成">
          <div class="details_card" v-loadMore="[payLoads,'refunds-list4']" :style="{height:tabsHeight+'px'}">
            <paymentList :payments="payments" @detailsClick="detailsClick"></paymentList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="退款失败">
          <div class="details_card" v-loadMore="[payLoads,'refunds-list5']" :style="{height:tabsHeight+'px'}">
            <paymentList :payments="payments" @detailsClick="detailsClick"></paymentList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="取消退款">
          <div class="details_card" v-loadMore="[payLoads,'refunds-list6']" :style="{height:tabsHeight+'px'}">
            <paymentList :payments="payments" @detailsClick="detailsClick"></paymentList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-footer class="el-footerBox">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadPayment"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import {
    EventBus
  } from "@/api/eventBus";
  import loadMore from '@/utils/more.js'
  import paymentList from './components/list'
  import Pagination from '@/components/Pagination';
  import {
    list
  } from '../../api/refunds'
  import utils from '../../utils/utils.js'
  export default {
    name: 'refunds-list',
    directives: {
      loadMore
    },
    activated() {
      this.payLoads = new Date().getTime();
    },
    data() {
      return {
        payLoads: '',
        queryType: false,
        curHeight: null,
        tabsHeight: null,
        orderStatus: '',
        total: 0,
        query: {
          date: [],
          title: '',
          orderSn: '',
        },
        pageNum: 1,
        pageSize: 20,
        keyword: {
          date: [],
          title: '',
          orderSn: '',
        },
        payments: [],
        pickerOptions: { //时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    components: {
      Pagination,
      paymentList
    },
    created() {
      EventBus.$on("refunds-details", res => {
        for (var i = 0; i < this.payments.length; i++) {
          if (this.payments[i].id == res.id) {
            this.$set(this.payments, i, res)
          }
        }

      });
      this.loadPayment()
    },
    mounted() {
      this.comeIn();
      this.beforeMount()
    },
    methods: {
      resetClick() {
        this.query.orderSn = '';
        this.query.date = [];
        this.query.title = '';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadPayment()
      },
      queryPayment() {
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadPayment()
      },
      detailsClick(data) {
        this.$router.push({
          path: '/refund/view',
          query: {
            id: data
          }
        })
      },
      loadPayment() {
        if (utils.isNull(this.keyword.date)) {
          this.keyword.date = []
        }
        let params = new URLSearchParams();
        params.append('pageNum', this.pageNum);
        params.append('pageSize', this.pageSize);
        params.append('status', this.orderStatus);
        params.append('sn', this.keyword.title);
        params.append('orderSn', this.keyword.orderSn);
        params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '');
        params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '');
        list(params).then(response => {
          this.total = response.data.total
          this.payments = response.data.data
        })
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 270 //减去页面上固定高度height
              _this.tabsHeight = h - 381
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 224 //减去页面上固定高度height
              this.tabsHeight = h - 294
            }
          })();
        };
      },
      comeIn() {
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 224 //减去页面上固定高度height
        this.tabsHeight = h - 294
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 270 //减去页面上固定高度height
          this.tabsHeight = h - 381
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 224 //减去页面上固定高度height
          this.tabsHeight = h - 294
        }
      },
      tabsClick(data) {
        var _this = this
        console.log(data)
        switch (data.paneName) {
          case '0':
            _this.orderStatus = '' // 订单状态
            break;
          case '1':
            _this.orderStatus = 0 // 订单状态
            break;
          case '2':
            _this.orderStatus = 1 // 订单状态
            break;
          case '3':
            _this.orderStatus = 2 // 订单状态
            break;
          case '4':
            _this.orderStatus = 3 // 订单状态
            break;
          case '5':
            _this.orderStatus = 4 // 订单状态
            break;
        }
        this.loadPayment()
      }
    }

  }
</script>

<style scoped>
  .details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
  }

  .details_card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }

  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }

  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
</style>
